<%= javascript_include_tag "pagination","jquery.jcarousel","jquery.jcarousel.min", "jquery.jcarousel.pack","popup"%>
<%= javascript_include_tag "application","jquery.lightbox-0.5","jquery.lightbox-0.5.min","jquery.lightbox-0.5.pack" %>
<div id="capaPopUp"></div>
<div id="popUpDiv">
    <div id="capaPng">
		<div id="cerrar">X</div>
        <div id = "capaContent">
			<h2>Tus Amigos:</h2>
            <% form_tag (:controller => "user_trips", :action => "create", :method => "post") do%>
				<input type="hidden" name="trip_id" value ="<%= @trip.id %>" >
				<div id = "personas">
					 <%= select_tag "user_id", options_from_collection_for_select(@friend_uninvited, :id, :name) %>
				</div>
				<input type='submit' value='Invitar'>
			<% end %>
        </div>
    </div>
</div>

	 <script type="text/javascript">    
		 jQuery(document).ready(function() {  
			 jQuery('#carousel_adictos').jcarousel();  
		 });  
	 </script>  
	
	<script type="text/javascript">
		$(function() {
			$('#carousel_adictos a').lightBox({
				imageLoading: '/images/loading.gif',
				imageBtnClose: '/images/close.gif',
				imageBtnPrev: '/images/prev.gif',
				imageBtnNext: '/images/next.gif'
			});
		});

		$(function() {
			$( "button, input:submit, a", ".demo" ).button();
			$( "a", ".demo" ).click(function() { return true; });
		});
    </script>

	 <style type="text/css">
		/* jQuery lightBox plugin - Gallery style */
		#gallery {
			background-color: #444;
			padding: 10px;
			width: 520px;
		}
		#gallery ul { list-style: none; }
		#gallery ul li { display: inline; }
		#gallery ul img {
			border: 5px solid #3e3e3e;
			border-width: 5px 5px 20px;
		}
		#gallery ul a:hover img {
			border: 5px solid #fff;
			border-width: 5px 5px 20px;
			color: #fff;
		}
		#gallery ul a:hover { color: #fff; }
	</style>
	
	<style type="text/css">
		#datos{
			-moz-border-radius: 10px 10px 10px 10px;
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #99CC00;
			width: 30%;
			weight: 30%
		}
	</style>

	<%= javascript_include_tag "jquery.pagination","application" %>

<script type="text/javascript">
    /**
     * Callback function that displays the content.
     *
     * Gets called every time the user clicks on a pagination link.
     *
     * @param {int} page_index New Page index
     * @param {jQuery} jq the container with the pagination links as a jQuery object
     */
    function pageselectCallback(page_index, jq){
        var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
        $('#Searchresult').empty().append(new_content);
        return false;
    }
   
    /** 
     * Initialisation function for pagination
     */
    function initPagination() {
        // count entries inside the hidden content
        var num_entries = jQuery('#hiddenresult div.result').length;
        // Create content inside pagination element
        $("#Pagination").pagination(num_entries, {
            callback: pageselectCallback,
			num_display_entries:6,
			num_edge_entries:1,
            // Calculate the number of items to show dividing the actual number of items by items_per_page
			items_per_page:1
        });
     }
    
    // When document is ready, initialize pagination
    $(document).ready(function(){ 
        initPagination();
    });
</script>

	<h1>Descripcion del Viaje</h1>
	<div id="datos" style=" float:left; width: 90%;"></div>
	
	<div id="datosViaje" style=" float:left; margin-left:5%;">
		<h1>Datos del Viaje</h1>
			<p>
			  <b>Destino:</b>
			  <%=h @trip.tri_country %> - <%=h @trip.tri_city %>
			</p>
			<p>
			  <b>Fecha Salida:</b>
			  <%=h @trip.tri_start_date.strftime("%d-%m-%Y") %>
			</p>
			<p>
			  <b>Fecha Regreso:</b>
			  <%=h @trip.tri_end_date.strftime("%d-%m-%Y") %>
			</p>
			<p>
			  <b>Tipo de Viaje:</b>
			  <% if @trip.tri_shared == 0 %>
				Privado
			  <% else%>
				Publico
			  <% end-%>
			</p>
			<p>
			  <b>Lugar de Hospedaje:</b>
			  <%=h @trip.tri_lodging %>
			</p>
			<div class="demo">
				<% if (isOwner(@trip.id)) %>
					<% if (isAvailable(@trip.id)) %>
						<div style="margin-left: 0%; float: left;">
							<%= link_to "Editar Viaje", edit_trip_path(@trip) %>
						</div>
						<div style="margin-left: 50%;">
							<%= link_to "Cerrar Viaje", :controller => "trips", :action => "close_trip", :id => current_user.id %></p>
						</div>
					<% end -%>
				<% end -%>
			</div>
	</div>
	
	<div id="foticos">
		<div style="float:right; margin-right:35%; margin-top:-6%">
			<h1>Fotos del Viaje</h1>
		</div>
		<div id="carousel_adictos" class="jcarousel-skin-tango" style="margin-left: 39%; margin-top: 10%;" %>	
		  <ul> 
				<% @all_itineraries.each do |photos|%> 
					<li>
						<a href="<%= photos.iti_image_url %>" title="<%= photos.iti_location %>">
							<img src=" <%= photos.iti_image_url %>" width="75" height="75" alt="" />
						</a>
					</li>
				<% end-%>
			</ul>
		 </div>
	</div>
		
	<div id="datos" style=" float:left; width: 90%; margin-top:2%;"></div>
	<div id="grupoViaje" style="float:left; margin-top:2%; margin-left:5%;">
		<h1>Grupo de Viaje</h1>
			<div id="personasViaje" style="float:left; margin-left: 10%;">
				<% @user_invited.each do |userTrip|%>
					<% if (userTrip.id == current_user.id) %>
						<li>Tu
							<%if userTrip.id == @owner.id%>
								(Due&ntilde;o)
							<% end -%>
						</li>						
					<% else%>
						<%if userTrip.id == @owner.id%>
							<li><td><%= link_to ("#{userTrip.name} #{userTrip.lastname}"),:controller => "users", :action => "show", :id => userTrip.id %>(Due&ntilde;o)</td></li>
						<% else %>
							<li><td><%= link_to ("#{userTrip.name} #{userTrip.lastname}"),:controller => "users", :action => "show", :id => userTrip.id %></td></li>
						<% end -%>
					<% end-%>
				<% end-%>
			</div>
		<div class="demo">	
			<% if isAvailable(@trip.id) %>
				<% if isOwner(@trip.id) and is_public(@trip.tri_shared) %>
					<div style="text-align: center; margin-top: 41%;">
						<a id = 'abrirPop' href="javascript:void(0);">Invitar Amigos</a>
					</div>
				<% end -%>
			<% end -%>
		</div>
	</div>

	<div id="datos" style=" float:left; width: 90%; margin-top:5%;"></div>
	<script src="http://maps.google.com/maps/api/js?v=3.1&sensor=false" type="text/javascript"></script>
	<div id="mapa" style="float:right; margin-top:1%; margin-right:39%;">
	<h1>Ubicacion</h1>
	</div>
	<div id="map" style="width:400px; height:400px; margin-top:35%; margin-left:50%;"></div>
	
	
	<div id="itinerariosViaje" style=" float:left; margin-left: 0%; margin-top: -47%; height: 269px; width:35%;">
		<div style="text-align: center;"><h1>Itinerario(s) del Viaje</h1></div>
		<% i = 0 %>
			<div style="margin-left: 10%;">
				<% @itineraries.each do |itinerary|%>
					<input type="hidden" id="latitude<%= i + 1%>" name="latitude<%= i + 1%>" value="<%= itinerary.iti_latitude %>">
					<input type="hidden" id="longitude<%= i + 1%>" name="longitude<%= i + 1%>" value="<%= itinerary.iti_longitude %>">
					<input type="hidden" id="location<%= i + 1%>" name="location<%= i + 1%>" value="<%= itinerary.iti_location %>">
					<% i = i + 1 %>
				<% end -%>
		
				<div style="float:left; margin-top:0%; margin-left:9%;">
					<div id="Pagination"></div>
					<br style="clear:both;" />
					<div id="Searchresult" class="contbox2">
						This content will be replaced when pagination inits.
					</div>
					
					<div id="hiddenresult" style="display:none;">
						<%contadorPaginacion=0%>
						<%cuentaTotal=0%>
						<%commentMax = 5%>
						<table>
							<% if @itineraries.count > 0%>	
								<% @itineraries.each do |itinerary_paginated|%>
									<%cuentaTotal= cuentaTotal + 1 %>
									<% if (contadorPaginacion==0) %>
										<div class="result">
									<% end-%>		
										<div><%= link_to itinerary_paginated.iti_location, :controller => "itineraries", :action => "show", :id => itinerary_paginated.id %> - 
											<%=h countVotes(itinerary_paginated.id)%> Voto(s) - 
												<% if (isOwner(@trip.id)) %>
													<% if (isAvailable(@trip.id)) %>
														<%= link_to image_tag("/images/delete.png", :size => "25x25"), itinerary_paginated, :method => :delete %>
													<% end -%>
												<% end -%>
										</div>
									<%contadorPaginacion = contadorPaginacion+1%>
									<% if (contadorPaginacion==commentMax or contadorPaginacion==@itineraries.count or cuentaTotal==@itineraries.count )%>
									</div>
									<%contadorPaginacion=0%>
								<%end-%>
							<% end %>
						<%end-%>
						</table>
					</div>
					
						<input type="hidden" id="trip_count" name="trip_count" value="<%= i %>">
						<input type="hidden" id="tri_country" name="tri_country" value="<%= @trip.tri_country %>">
						<input type="hidden" id="tri_city" name="tri_city" value="<%= @trip.tri_city %>">
					</div>
		</div>
			<div id="nuevoIti "class="demo" style="margin-top:52%; margin-left:35%;">
		<% if isAvailable(@trip.id)%>	
				<%= link_to "Nuevo Itinerario", :controller => "trips", :action => "flickr", :id => @trip.id %>

		<% end -%>
	</div>


	</div>
	<div id="tweet" style="margin-top:-20%;">
		<% if isAvailable(@trip.id) and isOwner(@trip.id) and is_public(@trip.tri_shared)%>
			<div>
				<h1>Haz Tweet de tu Viaje!</h1>
				<%= tweet_button(:via => "tripbook", :text => "He creado un nuevo viaje en la red social TripBook.", :count => "none", :url => "http://www.google.com") %>
			</div>
		<% end -%>
	</div>

	<div id="footer" class="demo" style="margin-top:15%;">
		<% if isAvailable(@trip.id) and isOwner(@trip.id)%>
			<%= link_to "Eliminar Viaje", @trip, :method => :delete %>
		<% end -%>
		<%= link_to "Regresar", :controller => "users", :action => "home", :id => current_user.id %>
	</div>

